<template>
  <div>
    <div>
      <br>
      <!--搜索栏开始-->
      <!--    <el-row>-->
      <!--      <el-col :span="20" align="left">-->
      <!--        <el-form ref="searchParamsForm" :inline="true" size="small" class="demo-form-inline">-->
      <!--          <svg-icon icon-class="search" style="font-size: 25px;margin-left:20px;margin-top: 6px"></svg-icon>&nbsp;-->
      <!--          <el-form-item>-->

      <!--          </el-form-item>-->

      <!--          <el-form-item>-->
      <!--            <el-button type="primary" size="small" v-waves @click="btnQuery">查询</el-button>-->
      <!--            <el-button size="small" v-waves @click="resetSearch('searchParamsForm')">重置</el-button>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--      </el-col>-->
      <!--    </el-row>-->
      <!--搜索栏结束-->
      <!-- 课程列表 开始-->

      <el-row>
        <el-col :span="24" align="center">

          <div class="app-container">
            <el-tabs type="border-card" active-name="recommend">
              <el-tab-pane label="必修课程" name="required">
                <el-table
                  v-loading="loading"
                  class="table"
                  :data="requiredList"
                  :cell-style="{ textAlign: 'center' }"
                  :header-cell-style="{textAlign:'center'}"
                >
                  <el-table-column type="index"></el-table-column>
                  <el-table-column prop="cover" label="封面">
                    <template slot-scope="scope">
                      <el-image
                        fit="cover"
                        style="width: 140px; height: 60px"
                        shape="square"
                        :src="scope.row.cover">
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column prop="title" label="名称"></el-table-column>
                  <el-table-column prop="subjectName" label="分类"></el-table-column>
                  <el-table-column prop="lessonNum" width="70" label="总课时"></el-table-column>

                  <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                      <el-button type="primary" v-waves size="middle" @click="openDetailDialog(scope.row)">查看详情</el-button>
                      <el-button type="success" v-waves size="middle" @click="selectCourse(scope.row)">选择该课程</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <br>
                <el-row>
                  <el-col :span="24">
                    <el-pagination
                      background
                      align="center"
                      @size-change="requiredSizeChange"
                      @current-change="requiredCurrentChange"
                      :current-page.sync="required.pageNum"
                      :page-sizes="[7,15]"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="required.total">
                    </el-pagination>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="选修课程" name="select">
                <el-table
                  v-loading="loading"
                  class="table"
                  :data="selectList"
                  :cell-style="{ textAlign: 'center' }"
                  :header-cell-style="{textAlign:'center'}"
                >
                  <el-table-column type="index"></el-table-column>
                  <el-table-column prop="cover" label="封面">
                    <template slot-scope="scope">
                      <el-image
                        fit="cover"
                        style="width: 140px; height: 60px"
                        shape="square"
                        :src="scope.row.cover">
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column prop="title" label="名称"></el-table-column>
                  <el-table-column prop="subjectName" label="分类"></el-table-column>
                  <el-table-column prop="lessonNum" width="70" label="总课时"></el-table-column>

                  <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                      <el-button type="primary" v-waves size="middle" @click="openDetailDialog(scope.row)">查看详情</el-button>
                      <el-button type="success" v-waves size="middle" @click="selectCourse(scope.row)">选择该课程</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <br>
                <el-row>
                  <el-col :span="24">
                    <el-pagination
                      background
                      align="center"
                      @size-change="selectSizeChange"
                      @current-change="selectCurrentChange"
                      :current-page.sync="select.pageNum"
                      :page-sizes="[7,15]"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="select.total">
                    </el-pagination>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="为你推荐" name="recommend">
                <el-table
                  v-loading="loading"
                  class="table"
                  :data="recommendList"
                  :cell-style="{ textAlign: 'center' }"
                  :header-cell-style="{textAlign:'center'}"
                >
                  <el-table-column type="index"></el-table-column>
                  <el-table-column prop="cover" label="封面">
                    <template slot-scope="scope">
                      <el-image
                        fit="cover"
                        style="width: 140px; height: 60px"
                        shape="square"
                        :src="scope.row.cover">
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column prop="title" label="名称"></el-table-column>
                  <el-table-column prop="subjectName" label="分类"></el-table-column>
                  <el-table-column prop="lessonNum" width="70" label="总课时"></el-table-column>

                  <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                      <el-button type="primary" v-waves size="middle" @click="openDetailDialog(scope.row)">查看详情</el-button>
                      <el-button type="success" v-waves size="middle" @click="selectCourse(scope.row)">选择该课程</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <br>
                <el-row>
                  <el-col :span="21">

                    <el-pagination
                      background
                      align="center"
                      @size-change="recommendSizeChange"
                      @current-change="recommendCurrentChange"
                      :current-page.sync="recommend.pageNum"
                      :page-sizes="[7,15]"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="recommend.total">
                    </el-pagination>
                  </el-col>
                  <el-col :span="3">
                    没有感兴趣的？点击这里
                    <el-tooltip
                      class="item" effect="light" content="没有感兴趣的？点击这里" placement="top"
                      >
                      <i style="cursor: pointer;font-size: 16px" class="el-icon-refresh" @click="refresh"></i>
                    </el-tooltip>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="我的选课" name="mySelect">
                <el-table
                  v-loading="loading"
                  class="table"
                  :data="mySelectList"
                  :cell-style="{ textAlign: 'center' }"
                  :header-cell-style="{textAlign:'center'}"
                >
                  <el-table-column type="index"></el-table-column>
                  <el-table-column prop="cover" label="封面">
                    <template slot-scope="scope">
                      <el-image
                        fit="cover"
                        style="width: 140px; height: 60px"
                        shape="square"
                        :src="scope.row.cover">
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column prop="title" label="名称"></el-table-column>
                  <el-table-column prop="subjectName" label="分类"></el-table-column>
                  <el-table-column prop="required" label="必/选修">
                    <template slot-scope="scope">
                      <el-tag effect="plain" type="primary" v-waves v-if="scope.row.required===0">必修</el-tag>
                      <el-tag effect="plain" type="success" v-waves v-if="scope.row.required===1">选修</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="lessonNum" width="70" label="总课时"></el-table-column>
                  <el-table-column prop="teacherName" label="授课老师"></el-table-column>
                  <el-table-column prop="viewCount" label="选课人数"></el-table-column>
                  <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                      <el-button type="primary" v-waves size="middle" @click="openDetailDialog(scope.row)">查看详情</el-button>
                      <el-button type="danger" v-waves size="middle" @click="cancelCourse(scope.row)">取消</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <br>
                <el-row>
                  <el-col :span="24">
                    <el-pagination
                      background
                      align="center"
                      @size-change="mySelectSizeChange"
                      @current-change="mySelectCurrentChange"
                      :current-page.sync="mySelect.pageNum"
                      :page-sizes="[7,15]"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="mySelect.total">
                    </el-pagination>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 课程列表 结束-->
    <div>
      <!-- 课程信息 -->
      <el-dialog
        :title.sync="detailDialogTitle"
        :visible.sync="detailDialogVisible"
        destroy-on-close
        top="3vh"
        :close-on-click-modal="false"
      >
        <v-course-detail ref="DetailDialog"/>
        <span slot="footer">
          <el-button size="small" @click="detailDialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "select_list",
  components: {
    'v-course-detail': () => import('./course_detail')
  },
  data() {
    return {
      loading: true,
      requiredList: [],
      selectList: [],
      recommendList: [],
      mySelectList: [],
      //必修列表
      required: {
        pageSize: 7,
        pageNum: 1,
        total: 0
      },
      //选修列表
      select: {
        pageSize: 7,
        pageNum: 1,
        total: 0
      },
      //推荐列表
      recommend: {
        pageSize: 7,
        pageNum: 1,
        total: 0
      },
      //我的课程列表
      mySelect: {
        pageSize: 7,
        pageNum: 1,
        total: 0
      },
      detailDialogVisible: false,
      currentOperationData: null,
      detailDialogTitle: ''
    }
  },
  methods: {
    //分页大小改变
    requiredSizeChange(pageSize) {
      this.required.pageSize = pageSize;
      this.getRequiredList();
    },
    //当前页数改变
    requiredCurrentChange(pageNum) {
      this.required.pageNum = pageNum;
      this.getRequiredList();
    },
    selectSizeChange(pageSize) {
      this.select.pageSize = pageSize;
      this.getSelectList();
    },
    selectCurrentChange(pageNum) {
      this.select.pageNum = pageNum;
      this.getSelectList();
    },
    recommendSizeChange(pageSize) {
      this.recommend.pageSize = pageSize;
      this.getRecommendList();
    },
    recommendCurrentChange(pageNum) {
      this.recommend.pageNum = pageNum;
      this.getRecommendList();
    },
    mySelectSizeChange(pageSize) {
      this.mySelect.pageSize = pageSize;
      this.getMySelectList();
    },
    mySelectCurrentChange(pageNum) {
      this.mySelect.pageNum = pageNum;
      this.getMySelectList();
    },
    getRequiredList() {
      let jwtToken = localStorage.getItem('jwtToken');
      axios.get('/api/select/requiredList',
        {
          params: {
            pageNum: this.required.pageNum,
            pageSize: this.required.pageSize
          },
          headers: {jwtToken: jwtToken}
        }).then(result => {
        if (result.data.code === 200) {
          this.requiredList = result.data.data.requiredListVoList;
          this.required.pageNum = result.data.data.pageNum;
          this.required.pageSize = result.data.data.pageSize;
          this.required.total = result.data.data.total;
          this.loading = false;
        }
      }).catch(e => {
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
    getSelectList() {
      let jwtToken = localStorage.getItem('jwtToken');
      axios.get('/api/select/selectList',
        {
          params: {
            pageNum: this.select.pageNum,
            pageSize: this.select.pageSize
          },
          headers: {jwtToken: jwtToken}
        }).then(result => {
        if (result.data.code === 200) {
          this.selectList = result.data.data.selectListVoList;
          this.select.pageNum = result.data.data.pageNum;
          this.select.pageSize = result.data.data.pageSize;
          this.select.total = result.data.data.total;
          this.loading = false;
        }
      }).catch(e => {
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
    getRecommendList() {
      let jwtToken = localStorage.getItem('jwtToken');
      axios.get('/api/select/recommendList',
        {
          params: {
            pageNum: this.recommend.pageNum,
            pageSize: this.recommend.pageSize
          },
          headers: {jwtToken: jwtToken}
        }).then(result => {
        if (result.data.code === 200) {
          this.recommendList = result.data.data.recommendListVoList;
          this.recommend.pageNum = result.data.data.pageNum;
          this.recommend.pageSize = result.data.data.pageSize;
          this.recommend.total = result.data.data.total;
          this.loading = false;
        }
      }).catch(e => {
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
    getMySelectList() {
      let jwtToken = localStorage.getItem('jwtToken');
      axios.get('/api/select/mySelect',
        {
          params: {
            pageNum: this.mySelect.pageNum,
            pageSize: this.mySelect.pageSize
          },
          headers: {jwtToken: jwtToken}
        }).then(result => {
        console.log(result.data)
        if (result.data.code === 200) {
          this.mySelectList = result.data.data.mySelectListVoList;
          this.mySelect.pageNum = result.data.data.pageNum;
          this.mySelect.pageSize = result.data.data.pageSize;
          this.mySelect.total = result.data.data.total;
          this.loading = false;
        }
      }).catch(e => {
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
    openDetailDialog(curData) {
      this.detailDialogVisible = true
      this.currentOperationData = curData
      this.detailDialogTitle = `查看课程[${curData.title}]信息`
      setTimeout(function () {
        this.$refs.DetailDialog.setData(curData)
      }.bind(this), 100)
    },
    selectCourse(row) {
      this.$confirm("确认选择该课程吗？", '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let jwtToken = localStorage.getItem('jwtToken');
        axios.get('/api/select/select', {params: {id: row.id}, headers: {jwtToken: jwtToken}})
          .then(result => {
            if (result.data.code === 200) {
              if (result.data.data != null) {
                this.$message({
                  showClose: true,
                  message: '选课成功！',
                  type: 'success',
                  duration: 2000
                });
              } else {
                this.$message({
                  showClose: true,
                  message: '请勿重复选择本课程！',
                  type: 'warning',
                  duration: 2000
                });
              }
            }
          }).catch(e => {
          this.$message({
            showClose: true,
            message: '服务器去火星了!',
            type: 'error',
            duration: 2000
          });
        })
      })
    },
    cancelCourse(row) {
      this.$confirm("确认取消该课程吗？", '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let jwtToken = localStorage.getItem('jwtToken');
        axios.get('/api/select/cancel', {params: {id: row.id}, headers: {jwtToken: jwtToken}})
          .then(result => {
            if (result.data.code === 200) {
              this.$message({
                showClose: true,
                message: '取消成功！',
                type: 'success',
                duration: 2000
              });
            }
            this.getMySelectList()
          }).catch(e => {
          this.$message({
            showClose: true,
            message: '服务器去火星了!',
            type: 'error',
            duration: 2000
          });
        })
      })
    },
    refresh(){
      this.$router.go(0);
    }
  },
  created() {
    this.getRequiredList()
    this.getSelectList()
    this.getRecommendList()
    this.getMySelectList()

  }
}
</script>

<style scoped>

</style>
